<template>
	<uni-card spacing="0">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title" style="max-width: calc(100% - 60px); ">{{detailsData.consultationPurpose}}</text>
				<text :class="detailsData.reservationStatus == 'ACCEPTED' ? 'status' : 'status1'">{{detailsData.reservationStatusName}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-jibenxinxi1" style="padding-right: 15rpx; color: #01c2b7"></text>
				<text>咨询人： {{detailsData.name}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-shijian" style="padding-right: 15rpx; color: #01c2b7"></text>
				<text>咨询时间： {{detailsData.consultationTime}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-describe" style="padding-right: 15rpx; color: #01c2b7"></text>
				<text>具体问题： {{detailsData.concreteProblems}}</text>
			</view>
		</view>
	</uni-card>

	<uni-card spacing="0" v-if="detailsData.reservationStatus != 'NOT_PROCESSED'">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">{{detailsData.reservationStatus == 'ACCEPTED' ? '同意备注' : '拒绝备注'}}</text>
				<text
					:class="detailsData.reservationStatus == 'ACCEPTED' ? 'status' : 'status1'">{{detailsData.reservationStatusName}}</text>
			</view>
			<view class="flex-row">
				{{detailsData.receiveExpertComment}}
			</view>
		</view>
	</uni-card>

	<uni-card spacing="0">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">附件图片</text>
			</view>
			<view>
				<acImage v-model:imageList="imageList" style="padding: 0;" />
			</view>
		</view>
	</uni-card>

	<view v-if="detailsData.reservationStatus == 'NOT_PROCESSED'" class="flex-row  sticky-b10">
		<view class="tab-dom-item" @click="agreeClick(0)">拒绝</view>
		<view class="tab-dom-item1" @click="agreeClick(1)">同意</view>
	</view>

	<uni-popup ref="popupRef" type="center" :mask-click="false">
		<view class="operate-dom">
			<view class="title">{{typeKye ? '同意' : '拒绝'}}</view>
			<view class="close-icon" @click="closeOperate">
				<uni-icons type="closeempty" size="20"></uni-icons>
			</view>
			<uni-easyinput v-model="receiveExpertComment" placeholder="请输入备注" type="textarea" autoHeight trim />

			<view class="flex-row  operate-dom-btn">
				<view class="tab-dom-item" @click="closeOperate">关闭</view>
				<view class="tab-dom-item1" @click="agreeOk">确定</view>
			</view>
		</view>
	</uni-popup>

</template>

<script lang="ts" setup>
	import acImage from "@/pages/teacher/consult/a-components/ac-image.vue";
	import { getUser } from "@/utils/storage"
	import { Consult } from "@/api/tables/Consult"
	import { consultDetail, consultExpertOperate } from "@/api/consult"

	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'

	let imageList = ref([])
	let detailsData = ref<Consult>({});
	let popupRef = ref(null)
	let typeKye = ref(-1)
	let receiveExpertComment = ref('')

	onShow(() => {
		let user = getUser()
		let itemID = ''
		let jobseekerId = ''
		let receiveExpertId = ''
		// #ifdef MP-WEIXIN
		let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
		let params1 = routes[routes.length - 1].options
		itemID = params1.itemID
		jobseekerId = params1.jobseekerId
		receiveExpertId = params1.receiveExpertId
		// #endif

		// #ifdef H5 || APP-PLUS 
		let url = window.location.href
		// 通过 ? 分割获取后面的参数字符串
		let urlStr = url.split('?')[1]
		// 创建空对象存储参数
		let object = {};
		// 再通过 & 将每一个参数单独分割出来
		let paramsArr = urlStr.split('&')
		for (let i = 0, len = paramsArr.length; i < len; i++) {
			// 再通过 = 将每一个参数分割为 key:value 的形式
			let arr = paramsArr[i].split('=')
			object[arr[0]] = arr[1];
		}
		itemID = object.itemID
		jobseekerId = object.jobseekerId
		receiveExpertId = object.receiveExpertId
		// #endif
		if (user) {
			if (user.userId == receiveExpertId) {
				getDetail(itemID, jobseekerId)
			} else {
				uni.setStorageSync('userType', 2);
				uni.showModal({
					title: '提示',
					content: '此咨询预约不属于当前登录账号',
					showCancel: false,
					success(res) {
						uni.reLaunch({ url: '/pages/login/login' }); // 去到登录页面
					},
				});
			}
		} else {
			uni.setStorageSync('userType', 2);
			uni.showModal({
				title: '提示',
				content: '登录过期 请先新登录',
				showCancel: false,
				success(res) {
					if (res.confirm) {
						uni.navigateTo({ url: '/pages/login/login' }); // 去到登录页面
					} else if (res.cancel) {

					}
				},
			});
		}

	})

	function getDetail(consultationReservationId, jobseekerId) {
		consultDetail({ consultationReservationId, jobseekerId }).then(res => {
			if (res.code == '200') {
				let list = res.data.consultationList || []
				list.forEach(item => {
					item.url = item.thumbnail
				})
				imageList.value = list
				detailsData.value = res.data

			}
		})
	}

	function agreeClick(key) {
		receiveExpertComment.value = ''
		typeKye.value = key
		popupRef.value.open()
	}
	function agreeOk() {
		let user = getUser()
		let obj = {
			reservationStatus: typeKye.value ? 'ACCEPTED' : 'REJECTED',
			receiveExpertComment: receiveExpertComment.value,
			id: detailsData.value.id,
			jobseekerId: user.userId
		}
		consultExpertOperate(obj).then(res => {
			if (res.code == '200') {
				let user = getUser()
				if (user.subscribe == 1) {
					// subscribe ==1 // 已开启信息订阅
					// #ifdef MP-WEIXIN 
					uni.getSetting({
						withSubscriptions: true,
						success: (res) => {
							if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
								if (res.subscriptionsSetting.itemSettings != null) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
									uni.requestSubscribeMessage({
										tmplIds: ['sbtCBlQ8FP-Cjo9Z24U52WSgLBC8AvbTVx6xfog0z9M'],
										success: () => {
											uni.$emit('editUpdate', { ...detailsData.value, ...obj })
											closeOperate()
											uni.navigateBack({ delta: 1 })
										}
									});
								} else {
									uni.requestSubscribeMessage({
										tmplIds: ['sbtCBlQ8FP-Cjo9Z24U52WSgLBC8AvbTVx6xfog0z9M'],
										success: () => {
											uni.$emit('editUpdate', { ...detailsData.value, ...obj })
											closeOperate()
											uni.navigateBack({ delta: 1 })
										}
									});
								}
							} else { }
						},
						fail: () => {
							uni.$emit('editUpdate', { ...detailsData.value, ...obj })
							closeOperate()
							uni.navigateBack({ delta: 1 })
						}
					});
					// #endif

					// #ifdef H5 || APP-PLUS 
					uni.$emit('editUpdate', { ...detailsData.value, ...obj })
					closeOperate()
					uni.navigateBack({ delta: 1 })
					// #endif
				}

			}
		})
	}
	// 关闭 弹出层
	function closeOperate() {
		popupRef.value.close()
	}
</script>

<style lang="scss" scoped>
	.item-dom {
		font-size: 28rpx;
		color: #999999;
		font-family: "微软雅黑";

		.title {
			font-size: 30rpx;
			line-height: 2;
			color: #01c2b7;
			font-weight: 600;
		}

		.status {
			font-size: 26rpx;
			font-weight: 600;
			color: #01c2b7;
		}

		.status1 {
			font-size: 26rpx;
			font-weight: 600;
			color: #FF5722;
		}

		.location {
			width: calc(100% - 80px);
			font-size: 12px;
		}

		.navigation {
			margin-left: 10px;
			text-align: center;
			line-height: 1.5;
			width: 70px;
			font-size: 12px;
			color: #2b9395;
			border: 1px solid #2b9395;
			border-radius: 18px;
		}
	}

	.sticky-b10 {
		position: sticky;
		bottom: 0rpx;
		padding: 0px 15px;
		background: #f5f5f5;
		line-height: 2.5;
		font-size: 28rpx;
		text-align: center;

		.tab-dom-item {
			flex: 1;
			border-radius: 25px 0 0 25px;
			background: #FF5722;
			border: 1px solid #FF5722;
			color: #fff;
		}

		.tab-dom-item1 {
			flex: 1;
			border-radius: 0 25px 25px 0;
			background: #01c2b7;
			border: 1px solid #01c2b7;
			color: #fff;
		}
	}

	.operate-dom {
		width: 70vw;
		padding: 10px 20px 20px;
		background: #fff;
		border-radius: 8px;

		.title {
			min-height: 30px;
			padding: 0px 40px 5px;
			text-align: center;
			font-size: 30rpx;
			line-height: 2;
			color: #131313;
			font-weight: 600;
		}

		.close-icon {
			position: absolute;
			padding: 10px;
			top: 0px;
			right: 10px;
		}

		.operate-dom-btn {
			padding-top: 15px;
			text-align: center;
			line-height: 2;

			.tab-dom-item {
				flex: 1;
				padding: 5px 0;
				border-radius: 25px 0 0 25px;
				background: #e5e5e5;
				border: 1px solid #e5e5e5;
			}

			.tab-dom-item1 {
				flex: 1;
				padding: 5px 0;
				border-radius: 0 25px 25px 0;
				background: #01c2b7;
				border: 1px solid #01c2b7;
				color: #fff;
			}
		}
	}
</style>